<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:replace="common/base::pagetitle"></title>
    <link th:replace="common/base::static"/>
    <style>
        .theme {
            text-align: center;
            font-weight: bold;
            font-size: 18px;
        }
    </style>
</head>
<body style="background: white">
<form>
    <div class="layui-form" style="padding: 20px 30px 0 0;">
        <!-- 渲染模块-->
        <div class="theme" th:text="${formConfig.theme}">
            我是表单主题
        </div>
        <div id="fileBox">
            <div class="layui-form-item" th:each="fields: ${formConfig.fields}">
                <label class="layui-form-label" th:text="${fields.fieldName}">输入框</label>
                <div th:class="${fields.control=='textarea'||fields.control=='checkbox'||fields.control=='radio'?'layui-input-block':'layui-input-inline'}" th:data-checkbox="${fields.control=='checkbox'}">
                    <input th:if="${fields.control=='input'}" th:disabled="${!flowData.isFirstNode()}" type="text" th:name="${fields.field}" th:value="${fields.value}" th:lay-verify="${fields.required==1?'required':''}" th:placeholder="${'请填写' + fields.fieldName}" autocomplete="off" class="layui-input">
                    <select th:if="${fields.control=='select'}" th:disabled="${!flowData.isFirstNode()}" th:name="${fields.field}" th:lay-verify="${fields.required==1?'required':''}">
                        <option value="">请选择</option>
                        <option th:each="option: ${fields.options}" th:value="${option.value}" th:text="${option.text}" th:selected="${option.value==fields.value}"></option>
                    </select>
                    <textarea th:if="${fields.control=='textarea'}" th:disabled="${!flowData.isFirstNode()}" th:name="${fields.field}" th:text="${fields.value}" th:placeholder="${'请填写' + fields.fieldName}" th:lay-verify="${fields.required==1?'required':''}" class="layui-textarea"></textarea>
                    <input th:if="${fields.control=='checkbox'}" th:disabled="${!flowData.isFirstNode()}" th:each="option: ${fields.options}" type="checkbox" th:name="${fields.field}" th:title="${option.text}" th:checked="${#strings.contains(fields.value, option.value)}" th:value="${option.value}" th:lay-verify="${fields.required==1?'required':''}" lay-skin="primary">
                    <input th:if="${fields.control=='radio'}" th:disabled="${!flowData.isFirstNode()}" th:each="option: ${fields.options}" type="radio" th:name="${fields.field}" th:value="${option.value}" th:checked="${option.value==fields.value}" th:title="${option.text}" th:lay-verify="${fields.required==1?'required':''}">
                    <input th:if="${fields.control=='date'||fields.control=='datetime'||fields.control=='time'}" th:disabled="${!flowData.isFirstNode()}" th:id="${fields.field}" type="text" th:name="${fields.field}" th:value="${fields.value}" th:lay-verify="${fields.required==1?'required':''}" th:placeholder="${'请选择' + fields.fieldName}" th:data-date-type="${fields.control}" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <hr th:if="${!flowData.readOnly}">
        <!-- 选择审批用户模块 -->
        <div class="layui-form-item" th:if="${!flowData.readOnly&&flowData.nextNodeNum!=0}">
            <label class="layui-form-label">审批用户</label>
            <div class="layui-input-inline" style="width: 30px">
                <a class="layui-btn layui-btn-xs layui-bg-black" lay-event="selectUser" style="margin-top: 8px" id="selectUser"><i class="fa fa-user-plus"></i></a>
                <input type="hidden" class="layui-input" name="nextUser" th:value="${#lists.size(flowData.nextNodes) == 1?flowData.nextNodes[0].assignee:''}" autocomplete="off">
            </div>
            <div class="layui-form-mid layui-word-aux" style="color: #35867e!important;" id="nextUserText" th:text="${#lists.size(flowData.nextNodes) == 1?flowData.nextNodes[0].assignee:''}"></div>
        </div>
        <!-- 任务节点模块 -->
        <div class="layui-form-item" th:if="${!flowData.readOnly}">
            <label class="layui-form-label">下一环节</label>
            <div class="layui-input-block" th:if="${flowData.nextNodeNum==0}">
                <input type="radio" name="arc" title="归档" checked>
            </div>
            <div class="layui-input-block">
                <input th:each="nextNode, info: ${flowData.nextNodes}" type="radio" name="targetNodeId" lay-filter="selectNode" th:value="${nextNode.nodeId}" th:title="${nextNode.nodeName}" th:checked="${info.size==1}" th:data-assignee="${nextNode.assignee}" lay-verify="required">
            </div>
        </div>
        <hr th:if="${!flowData.readOnly}">
        <!-- 审批意见模块 -->
        <div class="layui-form-item" th:if="${!flowData.readOnly}">
            <label class="layui-form-label" th:text="${flowData.isFirstNode()?'备注':'审批意见'}">审批意见</label>
            <div class="layui-input-block">
                <textarea name="comment" th:placeholder="${flowData.isFirstNode()?'请填写备注':'请填写审批意见'}" class="layui-textarea"></textarea>
            </div>
        </div>

        <!-- 流程流转核心字段值 -->
        <div class="layui-form-item">
            <input type="hidden" name="theme" th:value="${formConfig.theme}">
            <input type="hidden" name="processName" th:value="${flowData.processName}">
            <input type="hidden" name="processDefinitionId" th:value="${flowData.processDefinitionId}">
            <input type="hidden" name="processInstanceId" th:value="${flowData.processInstanceId}">
            <input type="hidden" name="executionId" th:value="${flowData.executionId}">
            <input type="hidden" name="startUser" th:value="${flowData.startUser}">
            <input type="hidden" name="currentUser" th:value="${flowData.currentUser}">
            <input type="hidden" name="taskId" th:value="${flowData.taskId}">
            <input type="hidden" name="mainFormKey" th:value="${flowData.mainFormKey}">
            <input type="hidden" name="formKey" th:value="${flowData.formKey}">
            <input type="hidden" name="firstNodeId" th:value="${flowData.firstNodeId}">
            <input type="hidden" name="currentNodeId" th:value="${flowData.currentNodeId}">
            <input type="hidden" name="currentNodeName" th:value="${flowData.currentNodeName}">
            <input type="hidden" name="firstNode" th:value="${flowData.firstNode}">
            <input type="hidden" name="firstSubmit" th:value="${flowData.firstSubmit}">
            <input type="hidden" name="nextNodeNum" th:value="${flowData.nextNodeNum}">
        </div>

        <!-- 按钮模块  -->
        <div class="layui-form-item" th:if="${!flowData.readOnly}">
            <div class="layui-input-block">
                <a class="layui-btn " lay-submit lay-filter="kFormSubmit" lay-event="agree"><i class="layui-icon layui-icon-ok-circle"></i><span th:text="${flowData.isFirstNode()?'立即提交':'同意'}">同意</span></a>
                <a th:if="${!flowData.isFirstNode()}" class="layui-btn layui-btn-warm" lay-event="putBack"><i class="layui-icon layui-icon-return"></i>驳回</a>
                <a th:if="${!flowData.isFirstNode()}" class="layui-btn layui-btn-danger" lay-event="back2FirstNode"><i class="layui-icon layui-icon-prev"></i>回退首环节</a>
                <a th:if="${!flowData.isFirstNode()}" class="layui-btn layui-btn-normal" lay-event="back2AnyNode"><i class="layui-icon layui-icon-circle"></i>回退任意环节</a>
                <button th:if="${flowData.isFirstNode()}" type="reset" class="layui-btn layui-btn-primary" ><i class="layui-icon layui-icon-refresh"></i>重置</button>
            </div>
        </div>

        <!-- 选择可驳回节点模板 -->
        <div class="layui-container" style="display: none; width: 300px" id="canBackNodesLayout">
            <div style="margin-top: 30px">
                <select name="canBackNode" lay-filter="canBackNodeFilter" th:if="${!flowData.readOnly}">
                    <option value="">请选择需要驳回的节点</option>
                    <option th:each="node: ${flowData.canBackNodes}" th:value="${node.nodeId}" th:text="${node.nodeName}"></option>
                </select>
            </div>
        </div>

    </div>
</form>


<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>
<script>
    layui.use(['form', 'laydate', 'util'], function () {
        var $ = layui.$, form = layui.form, laydate = layui.laydate, util = layui.util;

        var tipsIdx;
        $('#selectUser').on('mouseenter', function () {
            tipsIdx = layer.tips('选择下个审批环节的审批人', $(this), {tips: 1, time: 5000});
        }).on('mouseleave', function () {
            layer.close(tipsIdx);
        });

        var index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引

        util.event('lay-event', {
            putBack: function (obj) {
                layer.confirm('确定要驳回上环节吗？', function () {
                    var taskId = $('input[name="taskId"]').val();
                    kvfKit.aPost(
                        BASE_WEB + 'workflow/put/back/task/{taskId}'.replace("{taskId}", taskId),
                        function (r) {
                            if (r.code === req.status.ok) {
                                kvfKit.sucessMsg('成功驳回任务');
                                parent.layui.table.reload('kContentTable');
                            } else {
                                kvfKit.errorMsg(r.msg);
                            }
                        }
                    )
                });
            },
            back2FirstNode: function (obj) {
                layer.confirm('确定要回退到首环节吗？', function () {
                    var taskId = $('input[name="taskId"]').val();
                    kvfKit.aPost(
                        BASE_WEB + 'workflow/put/back/first/task/{taskId}'.replace("{taskId}", taskId),
                        function (r) {
                            if (r.code === req.status.ok) {
                                kvfKit.sucessMsg('成功驳回任务');
                                parent.layui.table.reload('kContentTable');
                            } else {
                                kvfKit.errorMsg(r.msg);
                            }
                        }
                    )
                });

            },
            back2AnyNode: function (obj) {
                var taskId = $('input[name="taskId"]').val();
                var targetNodeId = '';
                var idx = layer.open({
                    type: 1,
                    title: '选择驳回环节',
                    resize: true,
                    fixed: true,
                    shadeClose: true,
                    shade: 0.1,
                    scrollbar: false,
                    area: ['435px', '310px'],
                    content: $('#canBackNodesLayout'),
                    btn: ['确定', '取消'],
                    yes: function(index, layero) {
                        targetNodeId = $('select[name="canBackNode"]').val();
                        if (!targetNodeId) {
                            return kvfKit.warningMsg('请先选择驳回环节');
                        }
                        layer.confirm('确定要驳回选择的环节吗？', function () {
                            kvfKit.aPost(
                                BASE_WEB + 'workflow/put/back2/task/{taskId}/{targetNodeId}'.replace("{taskId}", taskId).replace('{targetNodeId}', targetNodeId),
                                function (r) {
                                    if (r.code === req.status.ok) {
                                        kvfKit.sucessMsg('成功驳回任务');
                                        layer.close(idx);
                                        parent.layui.table.reload('kContentTable');
                                    } else {
                                        kvfKit.errorMsg(r.msg);
                                    }
                                }
                            )
                        });
                    }
                });

            },
            selectUser: function (obj) {
                // kvfKit.unhappyMsg('TODO: 选择用户功能');
                layer.open({
                    type: 2
                    ,title: '选择用户'
                    ,content: BASE_WEB + 'common/select/user'
                    ,maxmin: false
                    ,area: ['449px', '95%']   // 宽高
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        // var submit = layero.find('iframe').contents().find("#kFormSubmit");
                        // submit.click();
                        var selectedUsers = $(layero).find('iframe')[0].contentWindow.callbackData();
                        var sb = new StringBuilder();
                        var sb2 = new StringBuilder();
                        selectedUsers.forEach(function (item) {
                            if (sb.length() > 0) {
                                sb.append(',');
                                sb2.append(',');
                            }
                            sb.append(item.username);
                            sb2.append(item.realname);
                        });
                        setAssignee(sb.toString(), sb2.toString());
                    }
                });
            }
        });

        // 渲染日期控制
        $('#fileBox').find('input[data-date-type]').each(function (i, item) {
            var dateType = $(item).data('dateType');
            var id = $(item).attr('id');
            laydate.render({
                elem: '#' + id // 指定元素
                ,type: dateType
            });
        });

        form.on('select(canBackNodeFilter)', function (data) {
            log(data.value);
            log($(data.elem));
        });

        form.on('radio(selectNode)', function (data) {
            log('check value=', data.value);
            log('check assignee=', $(data.elem).data('assignee'));
            setAssignee($(data.elem).data('assignee'));
        });

        // 监听提交（办理同意功能）
        form.on('submit(kFormSubmit)', function(data) {
            var field = data.field; //获取提交的字段
            var nextNodeNum = $('input[name="nextNodeNum"]').val();
            var checkedNode = $('input[name="targetNodeId"]:checked').val();
            if (nextNodeNum !== '0' && !checkedNode) {
                return kvfKit.unhappyMsg('请选择下一流转环节', true);
            }
            if (Number(nextNodeNum) !==0 && !field.nextUser) {
                return kvfKit.unhappyMsg('请选择下一审批用户', true);
            }

            fillCheckboxData(field);

            log('fill field=', field);

            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.ajax({
                type: req.type.post,
                url: BASE_WEB + 'workflow/submit/task',
                dataType:'json',
                data: field,
                async: false,
                success: function (r) {
                    if (r.code === req.status.ok) {
                        if (Number(nextNodeNum) === 0) {
                            kvfKit.sucessMsg('流程归档成功！');
                        } else {
                            kvfKit.sucessMsg('任务提交至【' + $('input[name="targetNodeId"]:checked').attr('title') + '】节点，由用户【' + $('#nextUserText').text() + '】处理');
                        }
                        // 重载表格
                        parent.layui.table.reload('kContentTable');
                        // parent.layer.close(index); //再执行关闭
                    } else {
                        kvfKit.errorMsg(r.msg?r.msg:'任务已提交，无法再提交！');
                    }
                }
            });
        });

        function setAssignee(assigneeId, assigneeName) {
            $('input[name="nextUser"]').val(assigneeId);
            // TODO: 用户真实名称
            $('#nextUserText').text(assigneeName?assigneeName:assigneeId);
        }

        /**
         * 获取并补全同name checkbox选中的所有值：如1,2,3
         * @param field
         * @returns {*}
         */
        function fillCheckboxData(field) {
            $("div[data-checkbox='true']").each(function(i, item) {
                var checkedData = [];
                var checkboxs = $(item).find('input[type="checkbox"]:checked');
                if (checkboxs.length > 0) {
                    var name = $(checkboxs[0]).attr('name');
                    checkboxs.each(function (j, cItem) {
                        checkedData[j] = $(cItem).val();
                    });
                    // 将数组合并成字符串
                    field[name] = checkedData.join(",");
                }
            });
        }
    })
</script>
</body>
</html>